<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="write-exam">
		<div class="page-bg" v-if="info.firstAnswer">
			<div class="tip">
				<image src="../../static/tip_warp.png" alt=""/>
				<span>写作答题，即刻开练</span>
			</div>
			<image class="to-write" src="../../static/write_icon.png" alt=""/>
			<div class="go" @click="info.firstAnswer = false">马上就去</div>
		</div>
		<div class="header">
			<page-head
				class="title_words" 
				checkPlatform="false" 
				:title="pageTitle" 
				fColor="#191A1A" 
				style="color: #ffffff;" 
				icon="none" 
				:font-size="32"
			>
				<div slot="icon" @click="handleExit" style="padding: 0 10rpx;">
					<uni-icons type="left" size="24" ></uni-icons>
				</div>
			</page-head>
			<div class="tab-list">
				<span 
				class="tab-item" 
				v-for="(item, index) in tabList" 
				:key="index" 
				:class="{active: index == currentTab}"
				@click="changeTab(item, index)"
				>
					{{item.title}}
				</span>
			</div>
		</div>
		<div class="main-content" :style="{'padding-bottom': keyBoardHeight ? keyBoardHeight + 'px' : paddingBottom}">
			<div class="tab-content">
				<!-- 题目 -->
				<div class="tab" v-show="currentTab == 0">
					<div class="flag-blank">
						<span class="exam-name">{{info.examName}}</span>
						<div class="flag-item" v-if="info.questionType">{{ info.questionType }}</div>
					</div>
					<div class="content">
						<div class="cont-txt" v-if="partList.description" v-html="partList.description"></div>
						<div class="cont-txt" v-if="partList.passage" v-html="partList.passage"></div>
						<div class="cont-txt" v-if="partList.title" v-html="partList.title"></div>
						<div class="cont-txt image-div" v-if="partList.imgUrl">
							<image
								mode="aspectFit"
								@click="bigImage(partList.imgUrl)"
								:src="partList.imgUrl"
							></image>
						</div>
					</div>
				</div>
				<!-- 答题 -->
				<div class="tab" v-show="currentTab == 1">
					<textarea
						class="input-area"
						placeholder="输入正文内容"
						v-model="answer"
						:maxlength="-1"
						:auto-height="true"
						style="height: 100% !important;"
						placeholder-style="color: #7A7A7A;font-size: 28rpx;"
						:adjust-position="false"
						@input="handleInput"
						@keyboardheightchange="handleKeyBoard"
					/>
				</div>
				<!-- 记录 -->
				<div class="tab" v-show="currentTab == 2">
					<template v-if="info.writingSubmitList && info.writingSubmitList.length">
						<div class="record-title">
							<span class="main">本题已答<span class="num">{{info.writingSubmitList.length}}</span> 次</span>
							<!-- <span class="sub">评分1次，最后一次得分<span class="score">2</span></span> -->
							<!-- <span class="sub">暂无分数记录，赶快去评分吧！</span> -->
						</div>
						<div class="record-list">
							<div class="record-item" v-for="(item, index) in info.writingSubmitList" :key="index" @click="toDetail(item)">
								<div class="info">
									<span>单词数：{{item.wordNum}} &nbsp; 作答时长：{{formattedTime(item.duration)}}</span>
									<span class="time">{{item.submitTime}}</span>

								</div>
								<span class="text">
									<rich-text class="rich-text" :nodes="item.userAnswer"></rich-text>
								</span>
							</div>
						</div>
					</template>
					<div v-else class="no-data">
						<image src="../../static/no_record.png" alt=""/>
						<span>暂无作答记录</span>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-content">
			<div class="timer" v-if="currentTab != 2">
				<div class="time">
					<image class="timer-icon" src="../../static/timer_icon.png" alt=""/>
					<span>{{formattedTime(seconds)}}</span>
				</div>
				<span v-show="currentTab == 1" class="word-count">Word Count: {{wordCount}}</span>
			</div>
			<div class="foot-btn" :style="{display: currentTab == 0 ? 'flex': 'none'}">
				<div class="btn-blue" @click="jump">查看高分范文</div>
				<div class="btn-warp">
					<button
						class="customer-service-btn btn-red"
						type="default"
						show-message-card="true"
						open-type="contact"
					>
						批改服务
					</button>
				</div>
			</div>
			<div class="foot-btn" :style="{display: currentTab == 1 ? 'flex': 'none'}">
				<div class="tip" v-show="showTip">*拍照识别可能有误，提交前请仔细检查</div>
				<div class="pic-btn" @click="handleCamera">
					<image src="../../static/pic_icon.png" alt=""/>
					<span>拍照提交</span>
				</div>
				<div class="conform" @click="$refs.surePopupRef.open()">确认提交</div>
			</div>
		</div>
		<div class="to-write" v-show="currentTab == 0" @click="currentTab = 1">
			<image src="../../static/write_icon.png" alt=""/>
		</div>
		<uni-popup ref="progressPopupRef" background-color="#fff" borderRadius="10px" :maskClick="false" @change="(e) => show = e.show">
            <div class="pop-content">
				<template v-if="!ocrError">
					<div class="">
						正在全力识别中，请稍等......
					</div>
					<circle-progress :progress="progress"/>
				</template>
				<template v-else>
					<text class="main">未识别</text>
					<text class="sub">未检测到英文，重新拍摄试试~</text>
					<div class="ok" @click="closeProgressPop">确认</div>
				</template>
			</div>
        </uni-popup>
		<!-- 退出提示弹窗 -->
        <uni-popup ref="exitPopupRef" background-color="#fff" borderRadius="10px" @change="handleExitPop"  @on-mask-click="handleMaskClick">
            <div class="pop-content">
				<text class="sub">是否保留答题记录？</text>
                <div class="btn">
                    <text class="btn-item" @click="exit('no-save')">不保存</text>
                    <text class="btn-item" @click="save(0, 'submit')">保存</text>
                </div>
            </div>
        </uni-popup>
		<!-- 更新文本彈窗 -->
        <uni-popup ref="updatePopupRef" background-color="#fff" borderRadius="10px">
            <div class="pop-content">
				<text class="main">拍照识别将更新当前内容</text>
				<text class="sub">拍照识别成功后将更新当前内容，是否继续操作?</text>
                <div class="btn">
                    <text class="btn-item" @click="$refs.updatePopupRef.close()">取消</text>
                    <text class="btn-item" @click="uploadImage();$refs.updatePopupRef.close();">确认</text>
                </div>
            </div>
        </uni-popup>
		<!-- 确认提交彈窗 -->
        <uni-popup ref="surePopupRef" background-color="#fff" borderRadius="10px" :maskClick="true">
            <div class="pop-content">
				<text class="main">温馨提示</text>
				<text class="sub">提交后无法修改，确认提交吗?</text>
                <div class="btn">
                    <text class="btn-item" @click.stop="$refs.surePopupRef.close()">取消</text>
                    <text class="btn-item" @click.stop="sureSubmit">确认</text>
                </div>
            </div>
        </uni-popup>
		<page-container
            v-if="exitShow"
            :show="true"
            position="bottom"
            :custom-style="`width:0;height:0;`"
            :duration="0"
            :overlay="false"
            @beforeleave="beforeLeave"
        />
	</view>
</template>

<script>
import { apiWriteTopic, writeSubmit, writingSubmitDetail, removeWriteSubmit } from '@/api/exam/exam.js'
import circleProgress from './components/circleProgress.vue';
export default {
	data() {
		return {
			examId: null,
			partList: {},
			info: {}, 
			tabList: [
				{title: '题目'},
				{title: '答题'},
				{title: '提交记录'},
			],
			currentTab: 0,
			pageTitle: '',
			progress: 0,
			timerInterval: null,
			ocrData: {},
			answer: '', // 答案
			seconds: 0, // 计时
			intervalId: null,
			wordCount: 0, // 单词个数
			exitShow: true, // 退出弹窗
			ocrError: false,
			showTip: true,
			recordId: '',
			useRecord: 0,
			showTip: false,
			show: false,
			keyBoardHeight: 0
		}
	},
	components: {
		circleProgress
	},
	watch: {
		progress(val){
			if(val == 100){
				this.setAnswer()
				if(this.ocrData.lines_result){
					this.$refs.progressPopupRef.close()
					this.showTip = true
				}else {
					this.ocrError = true
					this.showTip = false
				}

				setTimeout(() => {
					this.progress = 0
				}, 1000);
			}
		},
		answer(){
			this.onTextareaInput()
		}
	},
	computed: {
		paddingBottom(){
			if(this.currentTab != 2){
				return '270rpx'
			}else {
				return '30rpx'
			}
		}
	},
	async onLoad(options) {
		this.examId = options.id
		this.currentTab = options.tab || 0
		this.recordId = options.recordId
		this.useRecord = options.useRecord || 0
		this.getInfo()
		if(this.useRecord == 1){
			this.getRecord(this.recordId)
		}else {
			this.startTimer()
		}
	},
	onShow(){
		if(Object.keys(this.info).length){
			this.startTimer()
		}
	},
	onHide(){
		this.stopTimer()
	},
	beforeDestroy() {
		this.stopTimer()
	},
	methods: {
		handleKeyBoard({detail: {height = 0}}){
			this.keyBoardHeight = height > 0 ? height + 60 : 0
		},
		async handleInput({detail: {value}}){
			const filteredValue = value.replace(/[\u4e00-\u9fa5]/g, '')
			await this.$nextTick()
			this.answer = filteredValue
		},
		sureSubmit(){
			this.save(1, 'submit')
			this.$refs.surePopupRef.close()
		},
		toDetail(item){
			uni.navigateTo({
				url: `/pages/exam/writeRecordDetail?id=${item.id}`
			})
		},
		getRecord(id) {
			writingSubmitDetail({
				id
			}).then((res) => {
				this.answer = res.data.userAnswer
				this.seconds = res.data.duration || 0
				this.startTimer()
				this.currentTab = 1
			})
		},
		formattedTime(time) {
			const hours = Math.floor(time / 3600);
			const minutes = Math.floor((time % 3600) / 60);
			const secs = time % 60;
			return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
		},
		async exit(isSave){
			if(isSave == 'no-save' && this.recordId){
				await removeWriteSubmit(this.recordId)
			}
			this.exitShow = false
			setTimeout(() => {
				uni.navigateBack()
			}, 300);
			// uni.redirectTo({
			// 	url: '/pages/exam/write'
			// })
		},
		// 拍照识别
		handleCamera(){
			if(this.answer){
				this.$refs.updatePopupRef.open()
			}else {
				this.uploadImage()
			}
		},
		// 关闭 重新拍照
		closeProgressPop(){
			this.$refs.progressPopupRef.close()
			setTimeout(() => {
				this.ocrError = false
			}, 500);
		},

		// 退出提示弹窗关闭时
		handleExitPop({show}){
			if(!show){
				setTimeout(() => {
                    this.exitShow = true
                }, 500)
			}
		},
		handleMaskClick(){
			this.$refs.exitPopupRef.close()
			setTimeout(() => {
				this.exitShow = true
			}, 500)
		},
		// page-container关闭前回调
		async beforeLeave(){
			// if(this.answer){
				this.$refs.exitPopupRef.open()
				await this.$nextTick()
				this.exitShow = false
				setTimeout(() => {
					this.exitShow = true
				}, 100)

			// }else {
			// 	this.exit()
			// }
		},
		save(type, active){
			this.$refs.exitPopupRef && this.$refs.exitPopupRef.close()
			if(!this.answer && active == 'submit'){
				return this.$tip.toast('请输入答题内容')
			}
			writeSubmit({
				examId: this.info.examId,
				userAnswer: this.answer,
				status: type,
				wordNum: this.wordCount,
				duration: this.seconds,
				id: this.useRecord == 1 ? this.recordId : null
			}).then(res => {
				if(active == 'submit'){
					if(type == 0){
						this.exit()
					}else {
						uni.redirectTo({
							url: `/pages/exam/writeSubmitSuccess?id=${res.data}&examId=${this.examId}`
						})
					}
				}
			})
		},
		startTimer() {
			this.$nextTick(async () => {
				if(this.intervalId){
					clearInterval(this.intervalId)
				}
				await this.$nextTick()
				this.intervalId = setInterval(() => {
					this.seconds++;
				}, 1000);
			})
		},
		stopTimer() {
			clearInterval(this.intervalId);
			this.intervalId = null;
		},
		onTextareaInput(event) {
			// 获取 textarea 的值
			const text = this.answer; // 兼容不同平台的 event 对象结构
			// 使用正则表达式统计单词个数
			// \s+ 匹配一个或多个空白字符，\b 匹配单词边界
			this.wordCount = text.trim().split(/\s+/).length;
			console.log(this.wordCount, 888)
		},
		// 识别出来的答案
		setAnswer(){
			const {lines_result = []} = this.ocrData
			if(!lines_result.length) return
			const text = lines_result.map(item => {
				return item.line_words + '\n'
			}).join('')
			this.answer = text
		},
		// 识别进度开始
		startProgress() {
			if (this.timerInterval) {
				// If the timer is already running, do nothing
				return;
			}
			this.timerInterval = setInterval(() => {
				if (this.progress < 100) {
				this.progress += 1;
				} else {
				// Clear the interval when the count reaches 100
				clearInterval(this.timerInterval);
				this.timerInterval = null;
				}
			}, 100); // Adjust the interval time (in milliseconds) as needed
		},
		uploadImage(){
			let url = ''
			if(process.env.NODE_ENV == 'development'){
				url = "https://bjielts-t.test.xdf.cn/test-api/answer/ielts/ocr"
			} else {
				url = "https://bjielts.xdf.cn/prod-api/answer/ielts/ocr"
			}
			let Authorization = uni.getStorageSync('Access-Token');
			const that = this
			uni.chooseImage({
				sizeType: ['compressed'],
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.$refs.progressPopupRef.open()
					this.startProgress()
					wx.uploadFile({
						url: url,
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test'
						},
						header: {
							u2at: Authorization
						},
						complete(uploadFileRes){
							console.log('上传完成')
								
							const res = JSON.parse(uploadFileRes.data)
							if(res.code == 200){
								that.ocrData = res.data
							}else {
								that.$tip.toast(res.msg)
							}
						}
					})
				}
			});
		},
		changeTab(item, index){
			this.currentTab = index
			if(this.currentTab == 2){
				this.stopTimer()
			}else {
				this.startTimer()
			}
		},
		// 左上角关闭按钮
		handleExit(){
			// if(this.answer){
				this.$refs.exitPopupRef.open()
			// }else {
			// 	this.exit()
			// }
		},
		getInfo() {
			this.$tip.loading()
			return apiWriteTopic({
				params: {
					examId: this.examId
				}
			}).then((res) => {
				this.info = res.data
				this.recordId = res.data.recordId || ''
				this.save(0, 'save')
				// if(res.data.lastPracticeStatus == 0){
				// 	this.$refs.reCordPopupRef.open()
				// }else {
				// 	this.startTimer()
				// }
				if (res.data.examExName) {
					this.pageTitle = res.data.examExName
				}
				this.partList = res.data.partList[0]
				setTimeout(() => {
					this.$tip.loaded()
				}, 500);
			})
		},
		// 跳转到其他小程序
		jump() {
			wx.navigateToMiniProgram({
				appId: 'wx77b8878a69e4d05b',
				path: 'page/home/topicsDetail/topicsDetail?id=p_65891bcbe4b064a8ccb338d5&h5Url=https%3A%2F%2FappiHOmgvWM5916.h5.xiaoeknow.com%2Fp%2Fcourse%2Fbig_column%2Fp_65891bcbe4b064a8ccb338d5',
				//develop开发版；trial体验版；release正式版
				envVersion: 'release',
				success(res) {
					// 打开成功
					console.log('跳转小程序成功！', res)
				}
			})
		},
		// 放大的图
		bigImage(url) {
			wx.previewImage({
				current: url,
				urls: [url]
			})
		}
	}
}
</script>
<style>
page{
	position: relative !important;
	top: 0 !important;
}
</style>
<style scoped lang="scss">

@function toRem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.content {
	padding-bottom: toRem(184);
}
.write-exam {
	position: relative;
	background-color: #F5F7FA;
	width: 100%;
	min-height: 100vh;
}
.cont-txt {
	padding: toRem(20) 0;
}
.image-div {
	width: 100%;
	text-align: center;
	image: {
		width: 100%;
	}
}
.footer-content{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
    z-index: 999;
	box-sizing: border-box;
	.timer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1F2321;
		font-size: toRem(25);
		padding:toRem(10) toRem(34) toRem(22);
		box-sizing: border-box;
		background-color: #F5F7FA;
		
		.time{
			display: flex;
			align-items: center;
		}
		.timer-icon{
			width: toRem(45);
			height: toRem(45);
			margin-right: toRem(4);
		}
		.word-count{
			color: #464646;
			font-size: toRem(27);
		}
	}
}
.foot-btn {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: toRem(42) toRem(34);
	box-sizing: border-box;
	background-color: #ffffff;
	width: 100%;
	box-shadow: 0rpx -1rpx 9rpx 0rpx rgba(220,222,226,0.4);
	border-radius: toRem(25) toRem(25) 0 0;
	font-size: toRem(28);
	position: relative;
	.tip{
		position: absolute;
		left: 50%;
		top: toRem(6);
		transform: translateX(-50%);
		color:#464646;
		font-size: toRem(22);
		width: 100%;
		text-align: center;
	}
	.btn-blue {
		flex: 1;
		margin-right: toRem(20);
		height: toRem(80);
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 1rpx solid #5155F7;
		color: #5155F7;
		font-size: toRem(28);
		line-height: toRem(80);
		text-align: center;
		box-sizing: border-box;
	}
	.btn-warp{
		box-sizing: border-box;
		flex: 1.01;
		margin-left: toRem(20);
	}
	.btn-red {
		box-sizing: border-box;
		height: toRem(80);
		background: #5155F7;
		border-radius: 40rpx;
		color: #fff;
		font-size: toRem(28);
		line-height: toRem(80);
		text-align: center;
		width: 100%;
	}
	.pic-btn{
		flex: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1F2321;
		background-color: #F2F5F7;
		border-radius: toRem(40);
		margin-right: toRem(13);
		height: toRem(80);
		line-height: toRem(80);
		image{
			width: toRem(40);
			height: toRem(37);
			margin-right: toRem(15);
		}
	}
	.conform{
		height: toRem(80);
		line-height: toRem(80);
		border-radius: toRem(40);
		flex: 3;
		color: #fff;
		background-color: #5155F7;
		margin-left: toRem(13);
		text-align: center;
	}
}
.customer-service-btn::after {
	border: none;
}
.tab-list{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 toRem(80) toRem(5);
	box-sizing: border-box;
	margin-bottom: toRem(8);
	margin-top: toRem(47);
	.tab-item{
		padding: 0 toRem(35);
		padding-bottom: toRem(15);
		position: relative;
		font-size: toRem(28);
		color: #91939D;
		
	}
	.active{
		color: #5155F7;
		font-weight: bold;
		&::after{
			content: '';
			width: toRem(36);
			height: toRem(6);
			background-color: #5155F7;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
.page-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.7);
	overflow: hidden;
	z-index: 9999;
	.tip{
		width: toRem(446);
		height: toRem(70);
		position: absolute;
		right: toRem(175);
		bottom: toRem(246);
		image{
			width: toRem(446);
			height: toRem(70);
		}
		span{
			width: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			color: #fff;
			font-size: toRem(28);
			text-align: center;
		}
	}
	.to-write{
		width: toRem(127);
		height: toRem(127);
		position: absolute;
		right: toRem(22);
		bottom: toRem(217);

	}
	.go{
		border: 1px solid #fff;
		border-radius: toRem(25);
		color: #fff;
		font-size: toRem(24);
		position: absolute;
		bottom: toRem(175);
		right: toRem(198);
		width: toRem(144);
		height: toRem(51);
		text-align: center;
		line-height: toRem(51);
	}

}
.read-img{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	image{
		width: 100%;
		height: 100%;

	}
	.toast{
		width: toRem(300);
		height: toRem(200);
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}
.pop-content{
	width: toRem(550);
	min-height: toRem(260);
	padding: toRem(43) toRem(30) toRem(30);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	.main{
		color: #3F3F3F;
		font-size: toRem(30);
		font-weight: bold;
	}
	.sub{
		color: #5B5B5B;
		font-size: toRem(25);
		line-height: toRem(40);
		margin-top: toRem(40);
	}
	.ok{
		color: #8287FA;
		font-size: toRem(31);
		margin-top: toRem(50);
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: toRem(50) toRem(50) 0;
		box-sizing: border-box;
		width: 100%;
		font-size: toRem(25);
		.btn-item{
			width: toRem(150);
			height: toRem(55);
			border-radius: toRem(7);
			text-align: center;
			line-height: toRem(55);
			&:first-child{
				background-color: #C6C7CC;
				color: #FFFFFF;
			}
			&:last-child{
				background-color: #8287FA;
				color: #FFFFFF;
			}
		}
		.btn-item2{
			width: toRem(150);
			height: toRem(55);
			border-radius: toRem(7);
			text-align: center;
			line-height: toRem(55);
			&:first-child{
				background-color: #8287FA;
				color: #FFFFFF;
			}
			&:last-child{
				background-color: #fff;
				border: 1rpx solid #8287FA;
				color: #8287FA;
			}
		}
	}

}
.header{
	position: sticky;
	left: 0;
	top: 0;
	background: linear-gradient(to bottom, #DCDEFF, #F5F7FA);
	// background: linear-gradient(45deg, #DCDEFF 0%, #DCDEFF 100%);
	z-index: 100;
}
.main-content{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: toRem(10) toRem(25) toRem(270);
	box-sizing: border-box;
	.tab-content{
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		border-radius: 15rpx;
		padding: toRem(28) toRem(30) toRem(30);
		box-sizing: border-box;
		background: linear-gradient(180deg, #F2F1FF 0%, #FFFFFF 80rpx);
		overflow: hidden;
		.tab{
			width: 100%;
			height: 100%;
			// overflow: auto;
		}
		.flag-blank{
			display: flex;
			align-items: center;
			.exam-name{
				color: #323232;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: toRem(22);
			}
			.flag-item {
				height: toRem(40);
				line-height: toRem(40);
				text-align: center;
				padding: toRem(4) toRem(14);
				background: rgba(253, 69, 61, 0.08);
				display: inline-block;
				border-radius: toRem(10);
				font-size: toRem(26);
				color: #fff;
				background-color: #8287FA;

			}

		}
		.input-area{
			width: 100%;
			min-height: toRem(800);
			// max-height: toRem(800);
			// overflow: auto;
			font-size: 28rpx;
		}
		.record-title{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #16171A;
			&>span{
				margin-bottom: toRem(22);
				// &:last-child{
				// 	margin-bottom: toRem(40);
				// }
			}
			.main{
				font-size: toRem(28);
				.num{
					font-size: toRem(42);
					margin: 0 toRem(10);
					font-weight: bold;
				}
			}
			.sub{
				font-size: toRem(26);
				.score{
					font-size: toRem(28);
					font-weight: bold;
					margin-left: toRem(10);
				}
			}
		}
		.record-item{
			width: 100%;
			padding: toRem(20) toRem(18);
			box-sizing: border-box;
			background-color: #EEF1F7;
			border-radius: toRem(15);
			margin-bottom: toRem(27);
			display: flex;
			flex-direction: column;

			.info{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				color: #16171A;
				font-size: toRem(26);
				.time{
					color: #575757;
					font-size: toRem(23);
					margin-top: toRem(8);
				}
			}
			.text{
				width: 100%;
				margin-top: toRem(22);
				padding: toRem(23) toRem(30);
				box-sizing: border-box;
				border-radius: toRem(15);
				background-color: rgba(255,255,255,.5);
				font-size: toRem(26);
				font-weight: 500;
				line-height: toRem(40);
				color: #323232;
			}
			.rich-text{
				display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 3; /* 2行，只有 webkit内核支持 */
				word-break: break-all; /* 纯英文换行 */
				overflow: hidden;
			}
		}
	}
}
.to-write{
	position: fixed;
	right: toRem(22);
	bottom: toRem(200);
	z-index: 1000;
	image{
		width: toRem(127);
		height: toRem(127);
	}
}
.no-data{
	width: 100%;
	min-height: calc(100vh - 500rpx);
	display: flex;
	flex-direction: column;
	color: #B2B2B2;
	font-size: toRem(26);
	padding-top: toRem(200);
	box-sizing: border-box;
	align-items: center;
	image{
		width: toRem(270);
		height: toRem(260);
	}
	span{
		margin-top: toRem(-60);
	}
}
</style>
